<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/ztree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="/ztree/v3/js/jquery.ztree.core-3.5.js"></script>
</head>
<body>

<ul id="tree" class="ztree"></ul>
<script type="text/javascript" th:inline="javascript">
    var zTreeObj;
    var setting = {
        data: {//表示tree的数据格式
            simpleData: {
                enable: true,//表示使用简单数据模式
                idKey: "id",//设置之后id为在简单数据模式中的父子节点关联的桥梁
                pidKey: "pId",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
                rootId: "root"//pid为root的表示根节点
            }
        },
        view: {
            selectedMulti: false
        }
    };
    var zTreeNodes =JSON.parse([[${treeJson}]]);
    //var zTreeNodes = [{name: "第一层级", id: 0, pId: null}, {name: "第二层级", id: 1, pId: 0}, {name: "第一层级", id: 2, pId: 0}];
    $(document).ready(function () {
        zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
        zTreeObj.expandAll(true);
    });
</script>
</body>
</html>